<template>
	<view class="content">
		<wd-card title="功能菜单">
			<!-- 宫格组件 -->
			<wd-grid :column="4" :showBorder="false" clickable>
				<wd-grid-item icon="usergroup" v-if="$auth.hasPermiOr(['system:user:list'])" text="用户管理"
					@itemclick="changeGrid">
				</wd-grid-item>
				<wd-grid-item icon="note" v-if="$auth.hasPermiOr(['system:role:list'])" text="角色管理"
					@itemclick="changeGrid">
				</wd-grid-item>
				<wd-grid-item icon="usergroup" v-if="$auth.hasPermiOr(['system:menu:list'])" text="菜单管理"
					@itemclick="changeGrid">
				</wd-grid-item>
				<wd-grid-item icon="fork" v-if="$auth.hasPermiOr(['system:dept:list'])" text="部门管理"
					@itemclick="changeGrid">
				</wd-grid-item>
				<wd-grid-item icon="heart" v-if="$auth.hasPermiOr(['system:post:list'])" text="岗位管理"
					@itemclick="changeGrid">
				</wd-grid-item>
				<wd-grid-item icon="chart-bar" v-if="$auth.hasPermiOr(['system:dict:list'])" text="字典管理"
					@itemclick="changeGrid">
				</wd-grid-item>
				<wd-grid-item icon="setting" v-if="$auth.hasPermiOr(['system:config:list'])" text="参数设置"
					@itemclick="changeGrid">
				</wd-grid-item>
				<wd-grid-item icon="chat" v-if="$auth.hasPermiOr(['system:notice:list'])" text="通知公告"
					@itemclick="changeGrid">
				</wd-grid-item>
				<wd-grid-item icon="wallet" v-if="$auth.hasPermiOr(['system:operlog:list'])" text="日志管理"
					@itemclick="changeGrid">
				</wd-grid-item>
			</wd-grid>
		</wd-card>
		<wd-card title="图表示例Bar">
			<view class="chart">
				<hy-chart :option="barOption" />
			</view>
		</wd-card>
		<wd-card title="图表示例Pie">
			<view class="chart">
				<hy-chart :option="pieOption" />
			</view>
		</wd-card>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref
	} from 'vue'

	import hyChart from '@/components/hyChart/index.vue'

	const {
		proxy
	} = getCurrentInstance()

	function changeGrid(e) {
		proxy.$modal.showToast('模块建设中~')
	}
	const barOption = ref({
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			data: ['Profit', 'Expenses', 'Income']
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [{
			type: 'value'
		}],
		yAxis: [{
			type: 'category',
			axisTick: {
				show: false
			},
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		}],
		series: [{
				name: 'Profit',
				type: 'bar',
				label: {
					show: true,
					position: 'inside'
				},
				emphasis: {
					focus: 'series'
				},
				data: [200, 170, 240, 244, 200, 220, 210]
			},
			{
				name: 'Income',
				type: 'bar',
				stack: 'Total',
				label: {
					show: true
				},
				emphasis: {
					focus: 'series'
				},
				data: [320, 302, 341, 374, 390, 450, 420]
			},
			{
				name: 'Expenses',
				type: 'bar',
				stack: 'Total',
				label: {
					show: true,
					position: 'left'
				},
				emphasis: {
					focus: 'series'
				},
				data: [-120, -132, -101, -134, -190, -230, -210]
			}
		]
	})
	const pieOption = ref()
	// 更新图表测试
	setTimeout(() => {
		barOption.value = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				data: ['Profit', 'Expenses', 'Income']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [{
				type: 'value'
			}],
			yAxis: [{
				type: 'category',
				axisTick: {
					show: false
				},
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			}],
			series: [{
					name: 'Profit',
					type: 'bar',
					label: {
						show: true,
						position: 'inside'
					},
					emphasis: {
						focus: 'series'
					},
					data: [170, 240, 244, 200, 220, 210, 200]
				},
				{
					name: 'Income',
					type: 'bar',
					stack: 'Total',
					label: {
						show: true
					},
					emphasis: {
						focus: 'series'
					},
					data: [302, 341, 374, 390, 450, 420, 320]
				},
				{
					name: 'Expenses',
					type: 'bar',
					stack: 'Total',
					label: {
						show: true,
						position: 'left'
					},
					emphasis: {
						focus: 'series'
					},
					data: [-132, -101, -134, -190, -230, -210, -120]
				}
			]
		}
		pieOption.value = {
			tooltip: {
				trigger: 'item'
			},
			legend: {
				top: '5%',
				left: 'center'
			},
			series: [{
				name: 'Access From',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 40,
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: [{
						value: 1048,
						name: 'Search Engine'
					},
					{
						value: 735,
						name: 'Direct'
					},
					{
						value: 580,
						name: 'Email'
					},
					{
						value: 484,
						name: 'Union Ads'
					},
					{
						value: 300,
						name: 'Video Ads'
					}
				]
			}]
		};
	}, 5000)
</script>

<style>
	.chart {
		width: 100%;
		height: 480rpx;
	}
</style>